<template>
  <view class="row-item df fdc">
    <view
      class="item df fdr u-rela"
      v-for="(item, index) in list"
      :key="index"
      @click.stop="itemEvent(item)"
    >
      <image class="pic" :src="item.sku_image || item.goods_image"></image>
      <image v-if="url" class="label-icon" :src="url" mode="widthFix"></image>
      <view class="info df fdc jc-sb u-flex-1">
        <view>
          <view class="u-line-1 name lh-40">{{ item.sku_name || item.goods_name }}</view>
          <view class="u-line-1 font-24 lh-34 light-color name">{{ item.item_desc }}</view>
        </view>
        <view class="flex-between u-flex-1" v-if="type === 'order'">
          <view class="spec-name lh-40" v-if="item.spec_name">{{ item.spec_name }}</view>
          <view v-else></view>
          <block v-for="(val, idx) in item.refund_action" :key="idx">
            <template v-if="val.event === 'orderRefundApply'">
              <view
                class="font-24 lh-34 light-color return-btn"
                @click.stop="orderRefundApply(item)"
                >退款
              </view>
            </template>
          </block>
          <view class="light-color" v-if="item.refund_status_name">{{
            item.refund_status_name
          }}</view>
        </view>
        <view class="df fdr alc jc-sb font-24">
          <slot name="price">
            <view
              v-if="type === 'collect' && item.goods_state !== 1"
              class="w-112 h-48 lh-48 u-text-center bg-f5 radius-24 tips-color font-24"
            >
              已失效
            </view>
            <view v-else class="price u-m-r-8 font-weight-500">
              <text class="font-24"
                >￥<text class="font-32">{{ item.price }}</text></text
              >
            </view>
          </slot>
          <slot name="num">
            <view
              v-if="type === 'collect'"
              @click.stop="cancelCollection(item, index)"
              class="num-btn flex-center"
              >取消收藏</view
            >
            <view v-if="item.num" class="number font-24 font-weight-700">x {{ item.num }}</view>
          </slot>
        </view>
      </view>
      <!-- 提示文字 -->
      <!-- <view class="prompt-box" v-if="prompt">{{ prompt }}</view> -->
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => [],
      },
      url: {
        type: String,
        default: '',
      },
      prompt: {
        type: String,
        default: '',
      },
      link: {
        type: String,
        default: '',
      },
      // 列表类型
      type: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        keyword: '',
      }
    },
    methods: {
      itemEvent(item) {
        if (item.goods_state !== 1 && this.type === 'collect') {
          return
        }
        if (this.link) {
          this.jump(this.link)
        } else {
          this.jump(`/views/goods/goods_detail?id=${item.goods_id || item.order_goods_id}`)
        }
      },
      btnEvent(val, item) {
        this[val.event](item)
      },
      // 申请维权
      orderRefundApply(item) {
        this.jump(
          `/views/order/refund/mode?id=${item.order_id}&order_goods_id=${item.order_goods_id}`
        )
      },
      /**
       * 商品收藏/取消收藏
       */
      async cancelCollection(item, index) {
        this.$emit('cancel', {
          ...item,
          index,
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .row-item {
    .item {
      position: relative;
      width: 100%;
      margin-bottom: 30rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 8rpx;
      box-shadow: 0 6rpx 40rpx 0 rgba(0, 0, 0, 0.05);

      &:last-child {
        margin-bottom: 0;
      }
    }

    .pic {
      width: 220rpx;
      height: 220rpx;
    }

    .info {
      padding: 24rpx 20rpx 20rpx 20rpx;
    }

    .name {
      width: 430rpx;
    }

    .spec-name {
      display: inline-block;
      padding: 0 12rpx;
      line-height: 32rpx;
      color: var(--color);
      border: 1px solid var(--color);
      border-radius: 18px;
    }

    .return-btn {
      display: inline-block;
      padding: 6rpx 32rpx;
      line-height: 32rpx;
      color: #999;
      border: 2rpx solid #999;
      border-radius: 18px;
    }

    .choice-icon {
      position: absolute;
      top: 0;
      right: 0;
    }

    .num-btn {
      width: 146rpx;
      height: 52rpx;
      color: var(--color);
      border: 2rpx solid var(--color);
      border-radius: 26rpx;
    }
  }
</style>
